<template>
    <div v-if="userInf">
         <page-header  @toLastPage="toLastPage">
            <template v-slot:title >
                <span >
                    设置备注和标签
                </span>
            </template>
             <template v-slot:right >
                <van-button type="primary" size="small" hairline color="#09BF63" :disabled='disabled' @click="finishChange">完成</van-button>
            </template>
        </page-header>
        <div class="setting-wrapper">
            <div class="tip">备注名</div>
            <van-cell-group>
            <van-field clearable v-model="remarks" label="" :placeholder="userInf.F_beizhu" />
            </van-cell-group>
        </div>
        <div class="tip">标签</div>
        <div class="label" @click="toSetLabel" v-if="userInf.F_FriendType.length!==0">
            <div class="item-wrapper flex" >
                <div class="item" v-for="(item,index) in userInf.F_FriendType" :key="index">{{item.label}}</div>
            </div>
            <!-- <span>添加标签对联系人进行分类</span> -->
            </div>
            <div class="text" v-else @click="toSetLabel">添加标签对联系人进行分类</div>
         <div class="tip">电话号码</div>
         <van-cell-group>
            <van-field  v-model="telephone" label="" type="tel" placeholder="添加电话号码" />
            </van-cell-group>
         <div class="tip">描述</div>
        <van-field v-model="describe" label="" placeholder="添加更多备注信息"/>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
import { user,friends } from '../../../api/collections/index';
export default {
    components:{
        pageHeader
    },
    meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        return friends.findOne({F_UserID:this.id,F_FriendID:this.friendId})
    }
    },
    watch:{
        remarks(){
            if(this.remarks !== this.userInf.F_beizhu){
                this.disabled = false
            }
            else{
                this.disabled = true
            }
        }
    },
    data() {
        return {
            remarks:'',
            telephone:'',
            describe:'',
            friendId:this.$route.params.id,
            id:sessionStorage.getItem('user'),
            disabled:true
        }
    },
    methods:{
        toLastPage(){
                     this.$router.go(-1) 
        },
        toSetLabel(){
            this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 })
        },
        finishChange(){
            Meteor.call('friends.updateRemark',{
                uid:this.id,
                fid:this.friendId,
                remark:this.remarks
            },(err,res)=>{
                if(err){
                    this.$toast(err.error)
                }else{
                    this.$router.go(-1)
                }
            })
        }
    }
}
</script>
<style scoped>
.van-button{
    margin-top: .3rem;
    padding: .25rem .5rem;
    height: auto;
}
.setting-wrapper{
    margin-top: 1.5rem;
}
.tip{
    font-size: .4rem;
    color: #828282;
    padding: .3rem;
}
.van-cell{
    padding: .3rem;
}
.label{
    background-color: #fff;
    padding: .3rem;
}
.text{
    font-size: .6rem;
    background-color: #fff;
    padding:.5rem .3rem;
    color: #ABABAB;
}
.label span{
    color: #ABABAB;
    font-size: .7rem;
}
.item-wrapper{
    flex-wrap: wrap;
    box-sizing: border-box;
}
.item{
    padding: .05rem .15rem;
    font-size: .6rem;
    color: #10BD72;
    border: 1px solid #10BD72;
    border-radius: 2rem;
    width: 1.7rem;
    text-align: center;
    margin-right: .3rem;
    margin-bottom: .2rem;
}
</style>